<script setup>
    import { ref, getCurrentInstance, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import counter from '../../components/counter.vue';

    const router = useRouter()
    const colorMap = {
        '待支付': '#ffa200',
        '待服务': '#ff6600',
        '已完成': '#00bfff',
        '已取消': '#999'
    }

    const order = ref([])

    onMounted(() => {
        getOrderList('')
    })
    //获取当前vue实例
    const { proxy } = getCurrentInstance()

    const onClickTab = (item) => {
        getOrderList(item.name)
        // console.log(item.name);
    }

    // 获取订单列表
    const getOrderList = async (state) => {
        const { data } = await proxy.$api.orderList({ state })
        console.log('data', data);
        data.data.forEach(item => {
            item.timer = item.order_start_time + 7200000 - Date.now()
        });
        order.value = data.data
    }
    

    //跳转详情
    const goDetail = (item) => {
        router.push(`/detail?oid=${item.out_trade_no}`)
        
    }

    const active = ref('')
</script>

<template>
    <div class="container">
        <div class="header">
            <div class="header-text">我的订单</div>
            <van-tabs @click-tab="onClickTab" v-model:active="active">
                <van-tab title="全部" name="" />
                <van-tab title="待支付" name="1" />
                <van-tab title="待服务" name="2" />
                <van-tab title="已完成" name="3" />
                <van-tab title="已取消" name="4" />
            </van-tabs>
        </div>
        <div class="content">
            <van-row @click="goDetail(item)" v-for="item in order" :key="item.out_trade_no" class="van-row">
                <van-col span="5">
                    <van-image width="50" height="50" radius="5" :src="item.serviceImg" />
                </van-col>

                <van-col span="14">
                    <div class="text1">
                        {{ item.service_name }}
                    </div>
                    <div class="text2">
                        <div>{{ item.hospital_name }}</div>
                        <div>预约时间:{{ item.starttime }}</div>
                    </div>
                    <div>

                    </div>
                </van-col>

                <van-col :style="{ color: colorMap[item.trade_state] }" span="5">
                    <div>{{ item.trade_state }}</div>
                    <counter :second="item.timer" v-if="item.trade_state === '待支付'" />
                </van-col>
            </van-row>
            <div class="bottom-text">没有更多了</div>
        </div>

    </div>

</template>

<style lang="less" scoped>
    .container {
        height: 100vh;
        background-color: #f0f0f0;
    }

    .header {
        height: 40px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .header-text {
        background-color: #fff;
        line-height: 40px;
        text-align: center;
    }

    .content {
        padding-top: 84px;
        padding-bottom: 50px;
    }

    .van-row {
        background-color: #fff;
        padding: 10px;
        margin: 5px;
        border-radius: 5px;

        .text1 {
            font-size: 16px;
            line-height: 25px;
            font-weight: bold;
        }

        .text2 {
            font-size: 14px;
            line-height: 20px;
            color: #999;
        }
    }

    .bottom-text {
        line-height: 50px;
        text-align: center;
        color: #999;
    }

</style>